<template>
	<view class="payment-container">
		<!-- A区域：顶部导航栏 -->
		<view class="nav-bar">
			<view class="back" @click="goBack">
				<u-icon name="arrow-left" color="#fff" size="36"></u-icon>
			</view>
			<view class="title">用餐缴费</view>
			<view class="right-icon">
				<!-- <u-icon name="more-dot-fill" color="#fff" size="20"></u-icon> -->
			</view>
		</view>

		<!-- B区域：位置信息 -->
		<view class="location-info">
			<long-press-tooltip :tooltip-text="canteenInfo.deptName + '/' + formData.canteenName">
				<view class="location-text">
					<text class="prefix">感谢您在</text>
					<view class="location-scroll">
						<text class="location" style="color: #121111 ;font-weight: 600;">{{ canteenInfo.deptName + '/' +
							formData.canteenName }}</text>
					</view>
					<text class="suffix">用餐</text>
				</view>
			</long-press-tooltip>
		</view>
		


		<!-- C区域：表单区域 -->
		<view class="form-wrapper">
			<view v-if="bol" style="display: flex;justify-content: flex-end;padding: 10rpx 20rpx;">
			<button  class="pay-for-btn" @click="handlePayFor">代付</button>
		</view>
			<scroll-view class="form-section" scroll-y>
				<!-- 用餐人信息 -->
				<view class="form-item">
					<view class="form-item-row">
						<text class="label required">用餐人</text>
						<input type="text" :value="formData.diner" @blur="(e) => formData.diner = e.detail.value"
							placeholder="请输入用餐人姓名" placeholder-style="color: #999;" maxlength="10" />
					</view>
				</view>


				<!-- 单位名称 -->
				<view class="form-item">
					<view class="form-item-row">
						<text class="label required">单位名称</text>
						<input type="text" :value="formData.unitName" @blur="(e) => formData.unitName = e.detail.value"
							placeholder="请输入单位信息" placeholder-style="color: #999;" maxlength="20" />
					</view>
				</view>

				<!-- 手机号码 -->
				<view class="form-item">
					<view class="form-item-row">
						<text class="label required">手机号码</text>
						<input type="number" :value="formData.phone"
							@blur="(e) => formData.phone = e.detail.value.replace(/\\D/g, '').slice(0, 11)"
							placeholder="请输入手机号码" maxlength="11" placeholder-style="color: #999;" />
					</view>
				</view>

				<!-- 用餐时间选择 -->
				<view class="form-item">
					<view class="form-item-row">
						<text class="label required">用餐开始时间</text>
						<view class="picker-value" @click="showStartCalendar">{{ formData.diningStartTime || '请选择用餐开始时间'
							}}</view>
					</view>
				</view>

				<view class="form-item">
					<view class="form-item-row">
						<text class="label required">用餐结束时间</text>
						<view class="picker-value" @click="showEndCalendar">{{ formData.diningEndTime || '请选择用餐结束时间' }}
						</view>
					</view>
				</view>

				

				<!-- 用餐费用类型列表 -->
				<block v-for="(item, index) in formData.diningExpenseList" :key="index">
					<view class="form-item">
						<view class="form-item-row">
							<text class="label required">{{ item.name }}（{{ item.expenseMoney }}元/次）</text>
							<input type="number" :value="item.num" @input="(e) => handleInput(e, 'dining', index)"
								maxlength="3" :placeholder="'请输入' + item.name + '用餐次数'" />
						</view>
					</view>
				</block>

				<!-- 用餐金额 -->
				<view class="form-item">
					<view class="form-item-row">
						<text class="label" style="margin-left: 22rpx;">用餐金额</text>
						<input type="number" :value="formData.diningAmount" disabled />
					</view>
				</view>

				<!-- 其他费用类型列表 -->
				<block v-for="(item, index) in formData.otherExpenseList" :key="index">
					<view class="form-item">
						<view class="form-item-row">
							<text class="label" style="margin-left: 22rpx;">{{ item.name }}（{{ item.expenseMoney }}元/次）</text>
							<input type="number" :value="item.num" @input="(e) => handleInput(e, 'other', index)"
								maxlength="3" :placeholder="'请输入' + item.name + '次数'" />
						</view>
					</view>
				</block>

				<!-- 其他费用金额 -->
				<view class="form-item">
					<view class="form-item-row">
						<text class="label"  style="margin-left: 22rpx;">其他费用金额</text>
						<input type="number" :value="formData.othersAmount" disabled />
					</view>
				</view>

				<!-- 备注 -->
				<view class="form-item">
					<text class="label"  style="margin-left: 22rpx;">备注</text>
					<textarea style="margin-left: 22rpx;" :value="formData.remark" @blur="(e) => formData.remark = e.detail.value"
						placeholder="请输入其他备注说明（最多200字）" placeholder-style="color: #999;" maxlength="200" />
				</view>
			</scroll-view>
		</view>

		<!-- D区域：底部支付区域 -->
		<view class="footer" v-if="showFooter">
			<view class="total">

				<view>合计：</view>
				<yuanPrice :value="formData.totalAmount" />

			</view>
			<button class="pay-btn" @click="handlePay">去支付</button>
		</view>

		<!-- 弹出层组件 -->
		<u-popup v-model="showPopup" mode="bottom" height="70vh">
			<view class="popup-content">
				<view class="contact-list-container">
					<contact-list ref="contactList" :tree-data="deptTreeData" @select="handleUserSelect" />
				</view>
			</view>
		</u-popup>
		<!-- 日历组件 -->
		<u-calendar v-model="showStartTimeCalendar" @close="showStartTimeCalendar = false; showFooter = true"
					@change="onStartTimeConfirm" :defaultDate="formData.diningStartTime" mode="date"
					min-date="1850-01-01" max-date="3050-12-31"></u-calendar>

				<u-calendar v-model="showEndTimeCalendar" @close="showEndTimeCalendar = false; showFooter = true"
					@change="onEndTimeConfirm" :defaultDate="formData.diningEndTime" mode="date" min-date="1850-01-01"
					max-date="3050-12-31"></u-calendar>
	</view>
</template>

<script>
import {
	submitMealOrder,
	getMealPriceConfig,
	getMealTimeConfig,
	checkRepeatOrder,
	checkQwUser
} from '@/api/meal/meal.js'
import {
	getListNumb
} from '@/api/meal/home.js'
import {
	getDeptAndUser
} from '@/api/meal/dept.js'
import {
	paySuccessService
} from '@/api/order/order.js'
import pay from '@/utils/pay.js'
import contactList from '@/components/dept-select/contactList.vue'
import yuanPrice from '@/components/yuanPrice/yuanPrice.vue'
import LongPressTooltip from '@/components/tooltip/tooltip.vue'

export default {
	components: {
		yuanPrice,
		contactList,
		LongPressTooltip
	},
	data() {
		const user = uni.getStorageSync("user")
		return {
			user: user,
			showPopup: false, // 控制弹出层显示
			showStartTimeCalendar: false, // 控制开始时间日历显示
			showEndTimeCalendar: false, // 控制结束时间日历显示
			location: '',
			id: '',//食堂id
			needScroll: false, // 是否需要滚动
			deptTreeData: null, // 存储组织架构树数据
			formData: {
				wxUserId: user.id,
				diner: user.nickName || user.name || '',
				unitName: '',
				phone: user.phone || '',
				diningStartTime: '',
				diningEndTime: '',
				diningExpenseList: [], // 用餐费用列表
				otherExpenseList: [], // 其他费用列表
				diningAmount: '0', // 用餐费用合计
				othersAmount: '0', // 其他费用合计
				totalAmount: '0', // 总费用
				remark: '',
				canteenId: '',//食堂id
				canteenName: '' //测试长名称
			},
			canteenInfo: {
				deptName: '', // 部门名称
				canteenId: '',
				status: '0'
			}, // 食堂信息
			expenseTypes: [], // 费用类型列表
			isSubmit: false, // 添加提交状态标记
			bol: false, // 判断当前用户是不是企业微信用户
			showFooter: true, // 控制底部支付区域显示
		}
	},
	onLoad(options) {
		console.log('当前页面参数', options)
		this.id = options.id
		// 初始化用户信息
		this.initUserInfo()
	},
	onShow() {
		// 先检查用户是否已登录
		if (this.user && this.user.id) {
			// 获取价格配置
			this.getPriceConfig()

			// 使用nextTick等待DOM更新后再检查文本滚动
			this.$nextTick(() => {
				this.checkTextScroll()
			})
		}
	},
	// 监听食堂名称和部门名称变化，判断是否需要滚动
	watch: {
		'canteenInfo.deptName': {
			handler(val) {
				if (val) {
					this.$nextTick(() => {
						this.checkTextScroll()
					})
				}
			}
		},
		'formData.canteenName': {
			handler(val) {
				if (val) {
					this.$nextTick(() => {
						this.checkTextScroll()
					})
				}
			}
		}
	},
	methods: {
		// 获取订单统计
		async getListNumb() {
			const res = await getListNumb({
				wxUserId: this.user.id,
				phone: this.user.phone
			})
			if (res.data.code == 200) {
				//当前用户在当前食堂存在未支付订单
				if (res.data.data.toBePay > 0) {
					uni.showModal({
						title: '提示',
						content: '您有待支付的订单',
						confirmText: '去支付',
						cancelText: '我知道了',
						showCancel: true,
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/tabBar/home/home?pending=pending'
								})
							}
						}
					})
				}


			} else {
				uni.showToast({
					title: res.data.msg,
					icon: 'none'
				})
			}
		},


		// 获取树组织架构以及用户
		async getDeptAndUser() {
			const res = await getDeptAndUser({
				deptType: '3' //企业微信部门
			})
			console.log('树组织架构以及用户', res.data.data)
			this.deptTreeData = res.data.data
		},
		// 初始化用户信息
		async initUserInfo() {
			if (!this.checkLoginStatus()) return
			
			if (this.user) {
				this.formData.diner = this.user.nickName || this.user.name || ''
				this.formData.phone = this.user.phone || ''
				
				// 获取订单统计（只在首次进入页面时检查）
				await this.getListNumb()
				
				//如果当前用户存在电话号码，通过电话号码判断当前用户是不是企业微信用户
				if (this.user.phone) {
					let data = {
						phone: this.user.phone,
						clientId: this.user.clientId
					}
					let res = await checkQwUser(data)
					this.bol = res.data.data;
					console.log('判断当前用户是不是企业微信用户', this.bol)
					//如果当前用户是企业微信用户，则获取当前用户的企业微信部门
					if (this.bol) {
						this.getDeptAndUser()
					}
				}
			}
		},
		// 计算小计
		calculateSubtotal(item, type) {
			const num = parseInt(item.num || 0)
			const price = parseFloat(item.expenseMoney || 0)
			item.subtotal = (num * price).toFixed(2)

			// 计算总金额
			let diningAmount = 0
			let othersAmount = 0

			this.formData.diningExpenseList.forEach(item => {
				diningAmount += parseFloat(item.subtotal || 0)
			})

			this.formData.otherExpenseList.forEach(item => {
				othersAmount += parseFloat(item.subtotal || 0)
			})

			// 更新各项金额
			this.formData.diningAmount = diningAmount.toFixed(2)
			this.formData.othersAmount = othersAmount.toFixed(2)
			this.formData.totalAmount = (diningAmount + othersAmount).toFixed(2)
		},
		// 获取价格配置
		async getPriceConfig() {
			try {
				const res = await getMealPriceConfig(this.id)
				if (res.data.code === 200) {
					console.log('食堂详情', res.data.data)
					this.canteenInfo = res.data.data

					// 判断食堂状态
					if (this.canteenInfo.status === '1') {
						uni.showModal({
							title: '提示',
							content: '二维码已失效，请联系工作人员',
							showCancel: false,
							success: () => {
								uni.reLaunch({
									url: '/pages/tabBar/home/home'
								})
							}
						})
						return
					}

					this.expenseTypes = res.data.data.expenseTypeList || []
					this.formData.canteenId = res.data.data.canteenId //食堂id
					this.formData.canteenName = res.data.data.canteenName //食堂名称

					// 初始化费用列表，直接分成两个数组
					const diningExpenseList = []
					const otherExpenseList = []

					this.expenseTypes.forEach(type => {
						const item = {
							name: type.name,
							expenseMoney: type.expenseMoney,
							expenseUnits: type.expenseUnits,
							isDefault: type.isDefault,
							num: '',
							subtotal: '0',
							id: type.id
						}

						if (type.isDefault === '0') {
							diningExpenseList.push(item)
						} else {
							otherExpenseList.push(item)
						}
					})

					this.formData.diningExpenseList = diningExpenseList
					this.formData.otherExpenseList = otherExpenseList
				}
			} catch (error) {
				console.error('获取价格配置失败：', error)
			}
		},
		// 获取时间配置
		async getTimeConfig() {
			try {
				const res = await getMealTimeConfig()
				if (res.data.code === 200) {
					this.timeConfig = res.data.data
				}
			} catch (error) {
				console.error('获取时间配置失败：', error)
			}
		},
		// 检查登录状态
		checkLoginStatus() {
			if (!this.user || !this.user.id) {
				this.showModal()
				return false
			}
			return true
		},
		// 登录提示弹窗
		showModal() {
			uni.showModal({
				title: "提示",
				content: "您当前尚未登录",
				confirmText: "去登录",
				success(res) {
					if (res.confirm) {
						uni.navigateTo({
							url: "/pages/tabBar/login/login"
						})
					}
				}
			})
		},
		// 返回上一页
		goBack() {
			uni.navigateBack()
		},
		// 显示开始时间日历
		showStartCalendar() {
			this.showStartTimeCalendar = true
			this.showFooter = false
		},

		// 显示结束时间日历
		showEndCalendar() {
			this.showEndTimeCalendar = true
			this.showFooter = false
		},

		// 开始时间确认
		onStartTimeConfirm(e) {
			const newStartDate = this.formatDate(e.year, e.month, e.day)
			// 如果已有结束日期，检查是否合法
			if (this.formData.diningEndTime && newStartDate > this.formData.diningEndTime) {
				uni.showToast({
					title: '开始日期不能大于结束日期',
					icon: 'none'
				})
				return
			}
			this.formData.diningStartTime = newStartDate
			this.showStartTimeCalendar = false
			this.showFooter = true
		},

		// 结束时间确认
		onEndTimeConfirm(e) {
			const newEndDate = this.formatDate(e.year, e.month, e.day)
			// 如果已有开始日期，检查是否合法
			if (this.formData.diningStartTime && newEndDate < this.formData.diningStartTime) {
				uni.showToast({
					title: '结束日期不能小于开始日期',
					icon: 'none'
				})
				return
			}
			this.formData.diningEndTime = newEndDate
			this.showEndTimeCalendar = false
			this.showFooter = true
		},

		// 格式化日期
		formatDate(year, month, day) {
			month = month < 10 ? '0' + month : month
			day = day < 10 ? '0' + day : day
			return `${year}-${month}-${day}`
		},
		// 表单验证
		validateForm() {
			console.log('表单验证', this.formData);

			if (!this.formData.diner) {
				uni.showToast({
					title: '请输入用餐人姓名',
					icon: 'none'
				})
				return false
			}
			if (!this.formData.unitName) {
				uni.showToast({
					title: '请输入单位名称',
					icon: 'none'
				})
				return false
			}
			if (!this.formData.phone) {
				uni.showToast({
					title: '请输入手机号码',
					icon: 'none'
				})
				return false
			}
			if (!this.formData.diningStartTime) {
				uni.showToast({
					title: '请选择用餐开始时间',
					icon: 'none'
				})
				return false
			}
			if (!this.formData.diningEndTime) {
				uni.showToast({
					title: '请选择用餐结束时间',
					icon: 'none'
				})
				return false
			}
			// 校验结束日期不能小于开始日期
			if (this.formData.diningEndTime < this.formData.diningStartTime) {
				uni.showToast({
					title: '结束日期不能小于开始日期',
					icon: 'none'
				})
				return false
			}
			// 检查所有带*号的餐费项是否都已填写
			const emptyMeal = this.formData.diningExpenseList.find(item => {
				return !item.num && item.num != '0'  // 允许输入0，只检查是否有值
			})
			if (emptyMeal) {
				uni.showToast({
					title: `请输入${emptyMeal.name}次数`,
					icon: 'none'
				})
				return false
			}
			// 检查总金额是否大于0
			if (parseFloat(this.formData.totalAmount) <= 0) {
				uni.showToast({
					title: '一共用餐次数必须大于0次',
					icon: 'none'
				})
				return false
			}

			return true
		},
		// 处理支付
		async handlePay() {
			// 先检查登录状态
			if (!this.checkLoginStatus()) return

			if (!this.validateForm()) return

			if (this.isSubmit) return
			this.isSubmit = true


			uni.showLoading({
				title: '处理中'
			})

			try {
				// 合并费用列表
				const submitData = {
					...this.formData,
					expenseTypeList: [...this.formData.diningExpenseList, ...this.formData.otherExpenseList],
					payType: 20 // 微信支付
				}
				// 删除不需要的字段
				delete submitData.diningExpenseList
				delete submitData.otherExpenseList

				//计算总次数
				submitData.diningNum = this.formData.diningExpenseList.reduce((total, item) => {
					return total + parseInt(item.num || 0)
				}, 0)
				submitData.otherNum = this.formData.otherExpenseList.reduce((total, item) => {
					return total + parseInt(item.num || 0)
				}, 0)
				//计算总次数
				submitData.totalNum = submitData.diningNum + submitData.otherNum

				// 先检查是否有重复订单
				const checkRes = await checkRepeatOrder(submitData)
				console.log('检查重复订单', checkRes.data.data);

				if (checkRes.data.code === 200) {
					if (checkRes.data.data > 0) {
						// 存在重复订单，询问用户是否继续
						const confirmResult = await new Promise((resolve) => {
							uni.showModal({
								title: '提示',
								content: '存在相同付款记录，是否继续支付？',
								confirmText: '继续支付',
								success: (res) => {
									resolve(res.confirm)
								}
							})
						})

						if (!confirmResult) {
							this.isSubmit = false
							uni.hideLoading()
							return // 直接返回，不继续执行后续代码
						}
					}
				}

				// 提交订单
				console.log('提交订单', submitData);

				const orderRes = await submitMealOrder(submitData)
				console.log('提交订单结果', orderRes);

				if (orderRes.data.code === 200) {
					const order = orderRes.data.data
					const payInfo = order.payInfo

					// 发起微信支付
					pay.wxpays(this, payInfo,
						// 支付成功回调
						async (res, param) => {

							console.log('支付成功回调', order.orderInfo.id);
							const rest = await paySuccessService(order.orderInfo.id)
							if (rest.data.code == 200) {
								uni.showToast({
									title: "支付成功",
									icon: 'success',
									duration: 1000
								})
								setTimeout(() => {
									//去首页
									uni.redirectTo({
										url: '/pages/tabBar/home/home'
									})
								}, 1000)
							} else {
								uni.showToast({
									title: rest.data.msg,
									icon: 'error',
									duration: 1000
								})
							}

						},
						// 取消支付回调
						(res) => {
							uni.hideLoading()
							this.isSubmit = false
							uni.showToast({
								title: "取消支付",
								icon: 'none',
								duration: 1000
							})
							setTimeout(() => {
								//去首页
								uni.redirectTo({
									url: '/pages/tabBar/home/home'
								})
							}, 1000)

						}
					)
				} else {
					this.isSubmit = false
					if (orderRes.data.msg) {
						uni.showModal({
							title: '温馨提示',
							content: orderRes.data.msg,
							showCancel: false
						})

						setTimeout(() => {
								//去首页
								uni.redirectTo({
									url: '/pages/tabBar/home/home'
								})
							}, 1000)
					}
				}
			} catch (error) {
				console.error('支付过程出错：', error)
				this.isSubmit = false
				uni.showToast({
					title: '支付失败，请重试',
					icon: 'none',
					duration: 1000
				})
			} finally {
				uni.hideLoading()
				this.isSubmit = false
			}
		},
		// 处理代付按钮点击
		async handlePayFor() {
			try {
				// 先获取最新的组织架构数据
				const res = await getDeptAndUser({
					deptType: '3', //企业微信部门
					isQyClient: '1',//企业微信
				})

				if (res.data.code === 200) {
					this.deptTreeData = res.data.data
					// 数据获取成功后再打开弹窗
					this.showPopup = true
				} else {
					uni.showToast({
						title: res.data.msg || '获取组织架构失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('获取组织架构失败：', error)
				uni.showToast({
					title: '获取组织架构失败',
					icon: 'none'
				})
			}
		},
		// 关闭弹出层
		closePopup() {
			this.showPopup = false
		},
		// 处理用户选择
		handleUserSelect(user) {
			console.log('选择的用户：', user)
			// 填入用户信息
			this.formData.diner = user.nickName || ''
			this.formData.phone = user.phonenumber || ''
			this.formData.unitName = user.dept.deptName || ''
			this.closePopup()
		},
		// 检查文本是否需要滚动
		checkTextScroll() {
			const query = uni.createSelectorQuery().in(this)
			query.select('.location').boundingClientRect(textData => {
				query.select('.location-scroll').boundingClientRect(containerData => {
					if (textData && containerData) {
						this.needScroll = textData.width > containerData.width
					}
				}).exec()
			}).exec()
		},
		// 处理输入框输入
		handleInput(e, type, index) {
			let value = e.detail.value;

			// 去除小数点和非数字字符，只保留整数
			value = value.replace(/\\D/g, '');

			// 限制最大长度为3位
			if (value.length > 3) {
				value = value.slice(0, 3);
			}

			// 如果第一位是0，且长度大于1，则去掉前导0
			if (value.length > 1 && value[0] === '0') {
				value = value.replace(/^0+/, '');
			}

			if (type === 'dining') {
				this.formData.diningExpenseList[index].num = value;
				this.calculateSubtotal(this.formData.diningExpenseList[index], '0');
			} else {
				this.formData.otherExpenseList[index].num = value;
				this.calculateSubtotal(this.formData.otherExpenseList[index], '1');
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.payment-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 120rpx;

	.nav-bar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 176rpx;
		background-color: #2B9BFF;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		padding-top: 88rpx; // 状态栏高度
		color: #fff;
		z-index: 9;

		.back {
			width: 88rpx;
			height: 88rpx;
			display: flex;
			align-items: center;
			// justify-content: center;
		}

		.title {
			flex: 1;
			text-align: center;
			font-size: 32rpx;
			font-weight: normal;
		}

		.right-icon {
			width: 88rpx;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.location-info {
		position: fixed;
		top: 176rpx;
		left: 0;
		right: 0;
		padding: 20rpx 30rpx;
		background-color: #fff;
		font-size: 28rpx;
		color: #666;
		border-bottom: 1rpx solid #eee;
		z-index: 998;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.location-text {
			flex: 1;
			display: flex;
			align-items: center;
			white-space: nowrap;
			margin-right: 30rpx;

			.prefix,
			.suffix {
				white-space: nowrap;
			}

			.location-scroll {
				display: inline-block;
				overflow: hidden;
				margin: 0 4rpx;
				max-width: 400rpx;

				.location-scroll-content {
					display: inline-block;
					white-space: nowrap;

					&.scroll-active {
						animation: scrollText 15s linear infinite;
					}

					.location {
						color: #121111;
						font-weight: 600;
					}
				}
			}
		}

		@keyframes scrollText {
			0% {
				transform: translateX(0);
			}

			100% {
				transform: translateX(-100%);
			}
		}


	}

	.pay-for-btn {
			flex-shrink: 0;
			background: #1372FF;
			color: #fff;
			font-size: 28rpx;
			padding: 0 30rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 30rpx;
			margin: 0;
		}

	.form-wrapper {
		position: fixed;
		top: 272rpx;
		left: 0;
		right: 0;
		bottom: 120rpx;
		background-color: #fff;
	}

	.form-section {
		height: 100%;
		background-color: #fff;
		// padding: 30rpx;
		box-sizing: border-box;
	}

	.form-item {
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #eee;

		.form-item-row {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.label {
				font-size: 28rpx;
				color: #333;
				min-width: 180rpx;

				&.required::before {
					content: '*';
					color: #ff0000;
					margin-right: 6rpx;
				}
			}

			input {
				flex: 1;
				width: 400rpx;
				height: 60rpx;
				font-size: 28rpx;
				color: #333;
				background: none;
				text-align: right;
				margin-left: 20rpx;
			}

			.picker-value {
				flex: 1;
				width: 400rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 28rpx;
				color: #999;
				text-align: right;
				margin-left: 20rpx;
			}
		}

		textarea {
			width: 100%;
			height: 120rpx;
			font-size: 28rpx;
			color: #333;
			background: none;
			padding: 0;
			margin-top: 10rpx;
		}
	}

	.footer {
		position: fixed;
		z-index: 999;
		bottom: 0;
		left: 0;
		right: 0;
		height: 120rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 0 50rpx;
		border-top: 1rpx solid #eee;

		.total {
			display: flex;
			align-items: center;
			flex: 1;
			font-size: 28rpx;
			color: #333;

			.total-amount {
				color: #ff0000;
				font-size: 32rpx;
				font-weight: 500;
			}
		}

		.pay-btn {
			width: 200rpx;
			height: 70rpx;
			background-color: #2B9BFF;
			color: #fff;
			font-size: 30rpx;
			border-radius: 35rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0;
		}
	}

	.popup-content {
		height: 70vh;
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;
		overflow: hidden;
		display: flex;
		flex-direction: column;

		.popup-header {
			padding: 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #eee;

			text {
				font-size: 32rpx;
				font-weight: 500;
				color: #333;
			}
		}

		.contact-list-container {
			flex: 1;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
			padding-bottom: env(safe-area-inset-bottom);
		}
	}
}
</style>